<template>
  <div>
    <p v-if="isReadOnlyPage === true">开始时间：{{val.begin}}</p>
    <p v-if="isReadOnlyPage === true">结束时间：{{val.end}}</p>
    <div v-else>
      <div class="workingTimer">
        开始时间：
        <template>
          <a-time-picker @change="onChangeBeOnDuty" :id='code' :defaultValue="moment(val.begin, 'HH:mm:ss')" />
        </template>
      </div>
      <div class="workingTimer">
        结束时间：
        <template>
          <a-time-picker @change="onChangeOffDuty" :id='code' :defaultValue="moment(val.end, 'HH:mm:ss')" />
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import moment from 'moment'
export default {
  props: ['isReadOnlyPage', 'code', 'val'],
  data () {
    return {
      beOnDutyTimer: '',
      offDutyTimer: '',
      value: {
        begin: this.val.begin,
        end: this.val.end
      }
    }
  },
  methods: {
    moment,
    onChangeBeOnDuty (time, timeString) {
      this.value['begin'] = timeString
      this.$emit('changeRadioVal', this.value)
    },
    onChangeOffDuty (time, timeString) {
      this.value['end'] = timeString
      this.$emit('changeRadioVal', this.value)
    }
  }
}
</script>

<style lang="stylus" scoped>
.workingTimer
  margin-bottom 20px
</style>
